ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1.5;
  font-family: 'Roboto';
  /*background: #f2f2f2;
  color: #404040;*/

}

.view {
  width: 100%;
  background: transparent;
}

.card__list {
  padding: 0.75rem;
  background-color: white;
}
.card__item {
  margin: 0 0 0.75rem;
  padding: 2.25rem 1.5rem;
  border-top: 4px solid #404040;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background: white;
  cursor: pointer;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.card__item--tan {
  border-top-color: #AA9E5C;
}
.card__item--tan p.info-player__num {
  background: #AA9E5C;
  text-shadow:  1px 1px rgba(122, 113, 64, 0.7) , 2px 2px rgba(126, 117, 66, 0.715) , 3px 3px rgba(130, 121, 69, 0.73) , 4px 4px rgba(134, 124, 71, 0.745) , 5px 5px rgba(137, 127, 73, 0.76) , 6px 6px rgba(140, 130, 75, 0.775) , 7px 7px rgba(143, 133, 76, 0.79) , 8px 8px rgba(146, 136, 78, 0.805) , 9px 9px rgba(149, 138, 79, 0.82) , 10px 10px rgba(151, 140, 81, 0.835) , 11px 11px rgba(153, 142, 82, 0.85) , 12px 12px rgba(155, 144, 83, 0.865) , 13px 13px rgba(157, 146, 85, 0.88) , 14px 14px rgba(159, 148, 86, 0.895) , 15px 15px rgba(161, 150, 87, 0.91) , 16px 16px rgba(163, 151, 88, 0.925) , 17px 17px rgba(164, 153, 89, 0.94) , 18px 18px rgba(166, 154, 90, 0.955) , 19px 19px rgba(167, 155, 90, 0.97) , 20px 20px rgba(169, 157, 91, 0.985);
}
.card__item--tan:hover .info-player__name,
.card__item--tan:hover .info-place {
  color: #AA9E5C;
}
.card__item:hover {
  background: #444;
}
.card__item:hover .info-player__num {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.card__info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.card__info .info-player {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.card__info .info-player__num {
  width: 60px;
  height: 60px;
  line-height: 36px;
  padding: 0.75rem;
  margin: 0 0.75rem 0 0;
  text-align: center;
  background: silver;
  border-radius: 50%;
  font-size: 36px;
  color: white;
  overflow: hidden;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.card__info .info-player__name {
  line-height: 1.1;
  font-size: 20px;
  margin: 0;
}
.card__info .info-player__name small {
  font-size: 14px;
}
.card__info .info-place {
  margin: 0;
  font-size: 24px;
}

/*底部*/
footer{
  height: 245px;
  color:#ccc;
  font-size:12px;

  position:relative;
  z-index:-2;

  background-color:#31353a;

  background-image:-webkit-linear-gradient(top, #31353a, #2f3337);
  background-image:-moz-linear-gradient(top, #31353a, #2f3337);
  background-image:linear-gradient(top, #31353a, #2f3337);
}
/* Set a width to the outermost UL and center it */
footer > ul{
  width:960px;
  position:fixed;
  left:50%;
  bottom:0;
  margin-left:-480px;
  padding-bottom: 60px;
  z-index:-1;
}
/* The four columns of links */
footer > ul > li{
  width:25%;
  float:left;
}
footer ul{
  list-style: none;
}
/* The links */
footer > ul > li ul li{
  margin-left:43px;
  text-transform: uppercase;
  font-weight:bold;
  line-height:1.8;
}
footer > ul > li ul li a{
  text-decoration: none !important;
  color:#7d8691 !important;
}
footer > ul > li ul li a:hover{
  color:#ddd !important;
}
/* The company logo */
footer a.logo{
  color: #e4e4e4 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  text-transform: uppercase;
  margin-left: 16px;
  display: inline-block;
  margin-top: 7px;
}
footer a.logo i{
  font-style: normal;
  position: absolute;
  width: 60px;
  display: block;
  left: 48px;
  top: 18px;
  font-size: 12px;
  color: #999;
}
footer a.logo:before{
  content: '';
  display: inline-block;
  background: no-repeat -19px -70px;
  width: 48px;
  height: 37px;
  vertical-align: text-top;
}
/* Common styles for the four color bars */
footer p{
  width: 90%;
  margin-right: 10%;
  padding: 9px 0;
  line-height: 18px;
  background-color: #058cc7;
  font-weight: bold;
  font-size: 14px;
  color:#fff;
  text-transform: uppercase;
  text-shadow: 0 1px rgba(0,0,0,0.1);
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  margin-bottom: 20px;
  opacity:0.9;
  cursor:default;
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
footer > ul > li:hover p{
  opacity:1;
}
footer p:before{
  content: '';
  display: inline-block;
  width: 16px;
  height: 18px;
  margin: 0 12px 0 15px;
  vertical-align: text-bottom;
}
/*-------------------------
	The different colors
--------------------------*/
footer p.home{
  background-color: #0096d6;
  background-image:-webkit-linear-gradient(top, #0096d6, #008ac6);
  background-image:-moz-linear-gradient(top, #0096d6, #008ac6);
  background-image:linear-gradient(top, #0096d6, #008ac6);
}
footer p.home:before{
  background-position: 0 -110px;
}
footer p.services{
  background-color: #00b274;

  background-image:-webkit-linear-gradient(top, #00b274, #00a46b);
  background-image:-moz-linear-gradient(top, #00b274, #00a46b);
  background-image:linear-gradient(top, #00b274, #00a46b);
}
footer p.services:before{
  background-position: 0 -129px;
}
footer p.reachus{
  background-color: #d75ba2;

  background-image:-webkit-linear-gradient(top, #d75ba2, #c75496);
  background-image:-moz-linear-gradient(top, #d75ba2, #c75496);
  background-image:linear-gradient(top, #d75ba2, #c75496);
}
footer p.reachus:before{
  background-position: 0 -89px;
}
footer p.clients{
  background-color: #e9ac40;
  background-image:-webkit-linear-gradient(top, #e9ac40, #d89f3b);
  background-image:-moz-linear-gradient(top, #e9ac40, #d89f3b);
  background-image:linear-gradient(top, #e9ac40, #d89f3b);
}
footer p.clients:before{
  background-position: 0 -69px;
}